<template>
    <div>
        <!-- nav area -->
        <div class="nav-area">
            <ul>
                <li class="website-name">
                    <router-link to="/">
                        大乙科技服务平台
                    </router-link>
                </li>
                <li v-for="(item,index) in platform" :key="index" @click="goUrl(item)">{{ item.name }}</li>
                <!-- <li>敬请期待...</li> -->
                <li class="login">
                    <el-dropdown v-if="is_login == 1" size="small" @command="loginOut">
                        <el-button type="text" @click="login">{{ user_name }}</el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">
                                <i class="el-ali-ren"></i>
                                退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button v-else type="text" @click="login">{{ user_name }}</el-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user_name:'登录',
                is_login:0,
                platform:[
                    {
                        name:'亖次元平台',
                        url:'https://store.52mylife.cn',
                    },
                    {
                        name:'蓝鲸平台',
                        url:'https://www.52mylife.cn/admin',
                    },
                    {
                        name:'飞兔平台',
                        url:'',
                    },
                    {
                        name:'管理平台',
                        url:'/admin',
                    },
                ],
            }
        },
        mounted(){
            if(this.$route.params.type == 'blacklist'){
                this.$notify({
                    title: '警告',
                    message: '当前登录态已失效，请重新登录',
                    type: 'warning'
                });
            }else{
                this.getUserInfo()
            }
        },
        methods: {
            getUserInfo(){
                this.$axios({
                    url: this.$url.indexUserInfo,
                    headers:{
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                    },
                    method:'get',
                    data:{}
                }).then(response=>{
                    if(response.data.result.success){
                        this.user_name = response.data.content
                        this.is_login = 1
                        this.$store.commit('setUserName',response.data.content)
                        if(this.$route.name == 'login'){
                            this.$router.push('/')
                        }
                    }else{
                        if(response.data.result.errorCode == 409){
                            if(this.$route.name == 'index' || this.$route.name == 'learn' || this.$route.name == "video"){
                            }else{
                                console.log('re-login')
                                this.$router.push({name:'login',params:{ type:'blacklist' }})
                            }
                        }
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            login(){
                if(this.is_login == 0){
                    this.$router.push('/login')
                }
            },
            goUrl(item){
                if(item.url != "/admin"){
                    this.$axios({
                        url: this.$url.reTrunUrl,
                        method:'post',
                        data:{
                            url:item.url
                        }
                    }).then(response=>{
                        if(response.data.result.success){
                            window.location.href=response.data.content.url
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: response.data.result.errorMsg
                            });
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }else{
                    this.$router.push('/admin')
                }
            },
            loginOut(command){
                this.$axios({
                    url:this.$url.loginOut,
                    headers:{
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                    },
                    method:'post',
                    data:{}
                }).then(response=>{
                    if(response.data.result.success){
                        this.$store.commit('logout')
                        this.user_name = '登录'
                        this.is_login = 0
                    }else{
                        this.$notify.error({
                            title: '错误',
                            message: response.data.result.errorMsg
                        });
                    }
                }).catch(error=>{
                    console.log(error)
                })
            },
        },
    }
</script>

<style scoped>
    .nav-area{
        width:100%;
        height:50px;
        position: absolute;
        top:0;
        left:0;
        background-color:rgba(0, 0, 0, 0.3);
        z-index: 9;
    }
    .nav-area ul{
        list-style: none;
        margin:0;
        padding:0;
        width:100%;
        height:50px;
    }
    .nav-area ul li{
        float: left;
        height:50px;
        line-height: 50px;
        color:#fff;
        font-size:13px;
        padding:0 20px 0 20px;
        cursor: pointer;

    }
    .nav-area .website-name{
        font-size:18px;
    }
    .nav-area .website-name a{
        text-decoration: none;
        color:#fff;
    }
    .nav-area ul li.login{
        float:right;
        cursor: pointer;
        color:#fff;
    }
    .nav-area ul li.login .el-button--text{
        color:#fff;
    }
</style>